<template>
  <div class="update_event">
    <div class="update_title" @click="activeMap">事件更新</div>
    <el-dialog title="事件更新" :visible.sync="dialogFormVisible" width="350px">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="80px"
        size="mini"
      >
        <el-form-item label="事件编号" prop="SJid">
          <el-input v-model="form.SJid"></el-input>
        </el-form-item>
        <el-form-item label="事件类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择事件类型">
            <el-option label="碰撞" value="碰撞"></el-option>
            <el-option label="刮擦" value="刮擦"></el-option>
            <el-option label="失火" value="失火"></el-option>
            <el-option label="翻车" value="翻车"></el-option>
            <el-option label="碾压" value="碾压"></el-option>
            <el-option label="其它" value="其它"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="事件等级" prop="level">
          <el-select v-model="form.level" placeholder="请选择事件等级">
            <el-option label="轻微事故" value="0"></el-option>
            <el-option label="一般事故" value="1"></el-option>
            <el-option label="重大事故" value="2"></el-option>
            <el-option label="特大事故" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发生时间" prop="datetime">
          <el-date-picker
            v-model="form.datetime"
            value-format="yyyy.M.d H:m:s"
            type="datetime"
            placeholder="选择日期时间"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="事件地址" prop="address">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="车辆牌号" prop="number">
          <el-input v-model="form.number"></el-input>
        </el-form-item>
        <el-form-item label="司机名字" prop="user">
          <el-input v-model="form.user"></el-input>
        </el-form-item>
        <el-form-item label="审核状态" prop="level">
          <el-select v-model="form.statu" placeholder="请选择审核状态">
            <el-option label="待处理" value="0"></el-option>
            <el-option label="处理中" value="1"></el-option>
            <el-option label="已归档" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit('form')">确 定</el-button>
        </el-form-item>
      </el-form>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit('form')">确 定</el-button>
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
var map;
var docLayer;

import Bus from "../../utils/bus";
import { createDraw } from "../../utils/Draw";
import { queryPoint } from "../../utils/queryPoint";
import * as echarts from "echarts";
export default {
  data() {
    return {
      FID: "",
      position_update: [],
      addValue: [],
      dialogFormVisible: false,
      form: {
        SJid: "",
        type: "",
        level: "",
        datetime: "",
        address: "",
        number: "",
        user: "",
        statu: 0,
      },
      formLabelWidth: "120px",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > new Date().getTime();
        },
      },
      rules: {
        SJid: [
          { required: true, message: "请输入编号", trigger: "blur" },
          {
            message: "请输入编号",
            trigger: "blur",
          },
        ],
        type: [
          { required: true, message: "请选择事件类型", trigger: "change" },
        ],
        level: [
          {
            required: true,
            message: "请选择事件等级",
            trigger: "change",
          },
        ],
        address: [
          { required: true, message: "请填写活动形式", trigger: "blur" },
        ],
        datetime: [
          {
            // validator: checkTime,
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        number: [{ required: true, message: "请填写车牌号", trigger: "blur" }],
        user: [
          { required: true, message: "请填写驾驶员名字", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    Bus.$on("update", () => {
      this.activeMap();
    });
  },
  methods: {
    activeMap() {
      var that = this;
      map = this.$store.state.map;
      docLayer = this.$store.state.docLayer;
      map.on("click", (e) => {
        console.log(123);
        var position = e.coordinate;
        console.log(position);
        var service = {
          name: "guanggu",
          layerId: 3,
        };
        // console.log(position)
        queryPoint({
          position,
          service,
          successCallback: onSuccess,
        });
      });
      /* 2、成功查询mapgis点要素 */
      function onSuccess(e) {
        console.log(e);
        if (e.TotalCount == 0) {
          console.log("空");
          return;
        }
        that.FID = e.SFEleArray[0].FID;
        that.position_update.push(e.SFEleArray[0].bound.xmax);
        that.position_update.push(e.SFEleArray[0].bound.ymax);
        console.log(that.position_update);
        console.log(e.SFEleArray[0].AttValue.slice(0, 8));
        var arr = e.SFEleArray[0].AttValue.slice(0, 8);
        (that.form.SJid = arr[0]),
          (that.form.type = arr[1]),
          (that.form.level = arr[2]),
          (that.form.datetime = arr[3]),
          (that.form.address = arr[4]),
          (that.form.number = arr[5]),
          (that.form.user = arr[6]),
          (that.form.statu = arr[7]),
          (that.dialogFormVisible = true);
      }
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("提交成功");
        } else {
          return false;
        }
        this.dialogFormVisible = false;
        console.log(this.form);
      });
      var that = this;
      var gpoint = new Zondy.Object.GPoint(
        that.position_update[0],
        that.position_update[1]
      ); //createPoint();
      //设置当前点要素的几何信息
      var fGeom = new Zondy.Object.FeatureGeometry({ PntGeom: [gpoint] });
      //描述点要素的符号参数信息
      var pointInfo = new Zondy.Object.CPointInfo({
        Angle: 0,
        Color: 11,
        Space: 0,
        SymHeight: 8,
        SymID: 31, //子图号
        SymWidth: 8,
      });
      //设置当前点要素的图形参数信息
      var webGraphicInfo = new Zondy.Object.WebGraphicsInfo({
        InfoType: 1,
        PntInfo: pointInfo,
      });
      var update_Value = [];
      for (var value in that.form) {
        update_Value.push(that.form[value]);
      }
      //设置添加点要素的属性信息

      console.log(update_Value);
      var attValue = update_Value;
      //创建一个要素
      var newfeature = new Zondy.Object.Feature({
        fGeom: fGeom,
        GraphicInfo: webGraphicInfo,
        AttValue: attValue,
      });
      //设置要素为点要素
      newfeature.setFType(1);
      // *************************更新

      console.log(that.FID);
      newfeature.setFID(that.FID);
      //创建一个要素数据集
      var featureSet = new Zondy.Object.FeatureSet();
      featureSet.clear();
      //设置属性结构
      var cAttStruct = new Zondy.Object.CAttStruct({
        FldName: [
          "事件编号",
          "事件类型",
          "事件等级",
          "发生时间",
          "发生地点",
          "车牌号",
          "驾驶员",
          "处理状态",
        ],
        FldNumber: 8,
        FldType: [
          "string",
          "string",
          "int",
          "string",
          "string",
          "string",
          "string",
          "int",
        ],
      });
      featureSet.AttStruct = cAttStruct;
      console.log(featureSet);
      //添加要素到要素数据集
      featureSet.addFeature(newfeature);
      var editService = new Zondy.Service.EditDocFeature("guanggu", 3, {
        ip: "localhost",
        port: "6163", //访问IGServer的端口号，.net版为6163，Java版为8089
      });
      //执行添加点要素功能
      console.log(editService);
      editService.update(featureSet, onPntSuccess);

      //添加点要素回调函数
      console.log("回调函数");
      function onPntSuccess(data) {
        console.log(1111);
        if (data.succeed) {
          alert("修改点要素成功！");
          docLayer.refresh();
        } else {
          alert("修改点要素失败！");
        }
      }
    },
  },
};
</script>

<style>
/* .update_title {
  position: absolute;
  height: 50px;
  line-height: 50px;
  top: 3px;
  left: 450px;
  font-size: 14px;
  background-color: #fff;
  cursor: pointer;
} */
</style>
